<template>
  <div class="cubex-tab">
    <div class="exchange-panel">
        <div class="btn-panel">
            <div class="panel-bar last"><i class="bi bi-chevron-left"></i></div>
            <div class="panel-bar next disabled"><i class="bi bi-chevron-right"></i></div> 
        </div>

        <div class="panel-bar"><i class="bi bi-pen"></i></div>
        <div class="panel-bar"><i class="bi bi-camera-video"></i></div>
        <div class="panel-bar"><i class="bi bi-chat-left"></i></div>
        <div class="panel-bar"><i class="bi bi-chat-square-text"></i></div>
    </div>
    <div class="vi-ui attached tabular menu">
        <div v-for="(tab, index) in tabs" class="item" 
             :class="(tab.apptag === currentApp ? 'active': '') + (tab.apptag=='app.home' ? ' home' : '')" 
             @click="change(tab.apptag)"
             :key = index>
            <i :class="'bi bi-' + tab.icon"></i>{{ tab.title }}
            <i class="btn-close" @click.stop="closeTab(index,tab)"></i>
        </div>
    </div> 
    <div class="tab-content">
        <div class="content" v-show="tab.apptag === currentApp" v-for="(tab, index) in tabs">
            <browser-view :tabInfo="tab"></browser-view>
            <!-- <iframeWin></iframeWin> -->
        </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { useStore } from 'vuex'
import browserView from './browserView';
// import iframeWin from './iframeWin.vue';

const store = useStore()
const tabs = computed(()=> store.getters['tabs'])
const currentApp = computed(()=> store.getters['currentApp'])

const data = reactive({
    currentIndex: 0,
    text: ''
})

// const shell =  new window.PowerShell({
//         executionPolicy: 'Bypass',
//         noProfile: true 
//     })

// // Pull the Trigger
// shell.setInvocationQueue(['dir', 'cd /', 'ls'])
// shell.invoke('dir')
// .then(output => {
//     let string = (output.raw).replace(/\r\n/g, '<br>');
//     string = string.replace(/\s/g,  "&nbsp;")
//     string = string.replace(/\t/g,  ' ')
//     data.text = string; 
//     console.log(output)
// })
// .catch(err => { 
//     console.error(err)
//     shell.dispose() 
// })

const change =(tag)=>{
    store.commit( 'CHANGE_CURRENTAPP', tag )
}
const closeTab = ( index, tab)=>{
    const lastIndex = (()=>{
        if(tab.apptag === currentApp.value){
            if( tabs.value[index-1] ){
                return index-1
            }else if( tabs.value[index+1] ){
                return  index+1
            }
            return -1
        } else return -1
    })()
    // tab.apptag === currentApp ? ( (index+1)<tabs.value.length ? index+1 : (index-1 < 0 ? 0 : (index-1))) : -1
    lastIndex>=0 ? change( tabs.value[lastIndex].apptag ) :''
    tabs.value.splice(index, 1)
}

</script>

<style lang="scss" scoped> 
$active_bgcolor:#e9e9e9;
.cubex-tab{
    display: flex;
    flex-flow: column;
    width: 100%;
    flex:1;
}
.exchange-panel{
    box-sizing: border-box;
    height: 30px;
    background: #424242; 
    /* display: none; */
    border: 1px solid #2a2a2a;
    border-left: 0;
    box-shadow: 1px 0px 8px 0px #585656 inset;
    display: flex;
    .btn-panel{
        display: flex;
        padding: 0 8px;
        // background: #1f1f1f;
        // margin-left:8px;
        // border-radius: 5px;
    }
    .panel-bar{
        margin-left: 6px;
        width: 22px;
        height: 22px;
        border: 1px solid #555;
        align-items: flex-end;
        margin-top: 2px;
        color: #ccc;
        border-radius: 5px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        &.disabled{
            color:#505050;
            border-color: #505050;
        }
        &:not(.disabled):hover{
            border-color: #ffb52f;
            color: #ffb52f;
        }
    }
}
.tab-content{
    flex:1;
    display: flex;
    flex-flow: column;
    // overflow-y: auto;
    .content{
        min-height: 100%;
        background:$active_bgcolor;
        // padding:10px;
    }
}

.vi-ui.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    background: #fff;
    font-weight: 400;
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    border-radius: .28571429rem;
    min-height: 2.85714286em
}
.vi-ui.menu > .item{
    .bi{
        margin-right:8px;
    }
}

.vi-ui.menu:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.vi-ui.menu:first-child {
    margin-top: 0
}

.vi-ui.menu:last-child {
    margin-bottom: 0
}

.vi-ui.menu .menu {
    margin: 0
}

.vi-ui.menu:not(.vertical)>.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.vi-ui.menu:not(.vertical) .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.vi-ui.menu .item {
    position: relative;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: 0 0;
    padding: .92857143em 1.14285714em;
    text-transform: none;
    color: rgba(0,0,0,.87);
    font-weight: 400;
    -webkit-transition: background .1s ease,box-shadow .1s ease,color .1s ease;
    transition: background .1s ease,box-shadow .1s ease,color .1s ease
}

.vi-ui.menu>.item:first-child {
    border-radius: .28571429rem 0 0 .28571429rem
}

.vi-ui.menu .item:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: rgba(34,36,38,.1)
}

.vi-ui.menu .item>a:not(.vi-ui),.vi-ui.menu .item>p:only-child,.vi-ui.menu .text.item>* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    line-height: 1.3
}

.vi-ui.menu .item>p:first-child {
    margin-top: 0
}

.vi-ui.menu .item>p:last-child {
    margin-bottom: 0
}

.vi-ui.menu .item>i.icon {
    opacity: .9;
    float: none;
    margin: 0 .35714286em 0 0
}

.vi-ui.menu:not(.vertical) .item>.button {
    position: relative;
    top: 0;
    margin: -.5em 0;
    padding-bottom: .71428571em;
    padding-top: .71428571em;
    font-size: 1em
}

.vi-ui.menu>.container,.vi-ui.menu>.grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: inherit;
    -webkit-align-items: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: inherit;
    -ms-flex-direction: inherit;
    flex-direction: inherit
}

.vi-ui.menu .item>.input {
    width: 100%
}

.vi-ui.menu:not(.vertical) .item>.input {
    position: relative;
    top: 0;
    margin: -.5em 0
}

.vi-ui.menu .item>.input input {
    font-size: 1em;
    padding-top: .57142857em;
    padding-bottom: .57142857em
}

.vi-ui.menu .header.item,.vi-ui.vertical.menu .header.item {
    margin: 0;
    background: 0 0;
    text-transform: normal;
    font-weight: 700
}

.vi-ui.vertical.menu .item>.header:not(.vi-ui) {
    margin: 0 0 .5em;
    font-size: 1em;
    font-weight: 700
}

.vi-ui.menu .vi-ui.popup {
    display: none
}

.vi-ui.menu .vi-ui.visible.popup {
    display: block
}

.vi-ui.menu .item>i.dropdown.icon {
    padding: 0;
    float: right;
    margin: 0 0 0 1em
}

.vi-ui.menu .dropdown.item .menu {
    left: 0;
    min-width: calc(100% - 1px);
    border-radius: 0 0 .28571429rem .28571429rem;
    background: #fff;
    margin: 0;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.08);
    -webkit-box-orient: vertical!important;
    -webkit-box-direction: normal!important;
    -webkit-flex-direction: column!important;
    -ms-flex-direction: column!important;
    flex-direction: column!important
}

.vi-ui.menu .vi-ui.dropdown .menu>.item {
    margin: 0;
    text-align: left;
    font-size: 1em!important;
    padding: .71428571em 1.14285714em!important;
    background: 0 0!important;
    color: rgba(0,0,0,.87)!important;
    text-transform: none!important;
    font-weight: 400!important;
    box-shadow: none!important;
    -webkit-transition: none!important;
    transition: none!important
}

.vi-ui.menu .vi-ui.dropdown .menu>.item:hover,.vi-ui.menu .vi-ui.dropdown .menu>.selected.item {
    background: rgba(0,0,0,.05)!important;
    color: rgba(0,0,0,.95)!important
}

.vi-ui.menu .vi-ui.dropdown .menu>.active.item {
    background: rgba(0,0,0,.03)!important;
    font-weight: 700!important;
    color: rgba(0,0,0,.95)!important
}

.vi-ui.menu .vi-ui.dropdown.item .menu .item:not(.filtered) {
    display: block
}

.vi-ui.menu .vi-ui.dropdown .menu>.item .icon:not(.dropdown) {
    display: inline-block;
    font-size: 1em!important;
    float: none;
    margin: 0 .75em 0 0
}

.vi-ui.secondary.menu .dropdown.item>.menu,.vi-ui.text.menu .dropdown.item>.menu {
    border-radius: .28571429rem;
    margin-top: .35714286em
}

.vi-ui.menu .pointing.dropdown.item .menu {
    margin-top: .75em
}

.vi-ui.inverted.menu .search.dropdown.item>.search,.vi-ui.inverted.menu .search.dropdown.item>.text {
    color: rgba(255,255,255,.9)
}

.vi-ui.vertical.menu .dropdown.item>.icon {
    float: right;
    content: "\f0da";
    margin-left: 1em
}

.vi-ui.vertical.menu .dropdown.item .menu {
    top: 0!important;
    left: 100%;
    min-width: 0;
    margin: 0;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.08);
    border-radius: 0 .28571429rem .28571429rem
}

.vi-ui.vertical.menu .active.dropdown.item {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.vi-ui.vertical.menu .dropdown.active.item {
    box-shadow: none
}

.vi-ui.item.menu .dropdown .menu .item {
    width: 100%
}

.vi-ui.menu .item>.label {
    background: #999;
    color: #fff;
    margin-left: 1em;
    padding: .3em .71428571em
}

.vi-ui.vertical.menu .item>.label {
    background: #999;
    color: #fff;
    margin-top: -.15em;
    margin-bottom: -.15em;
    padding: .3em .71428571em;
    float: right;
    text-align: center
}

.vi-ui.menu .item>.floating.label {
    padding: .3em .71428571em
}

.vi-ui.menu .item>img:not(.vi-ui) {
    display: inline-block;
    vertical-align: middle;
    margin: -.3em 0;
    width: 2.5em
}

.vi-ui.vertical.menu .item>img:not(.vi-ui):only-child {
    display: block;
    max-width: 100%;
    width: auto
}

.vi-ui.vertical.sidebar.menu>.item:first-child:before {
    display: block!important
}

.vi-ui.vertical.sidebar.menu>.item::before {
    top: auto;
    bottom: 0
}

@media only screen and (max-width: 767px) {
    .vi-ui.menu>.vi-ui.container {
        width:100%!important;
        margin-left: 0!important;
        margin-right: 0!important
    }
}

@media only screen and (min-width: 768px) {
    .vi-ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
        border-left:1px solid rgba(34,36,38,.1)
    }
}

.vi-ui.link.menu .item:hover,.vi-ui.menu .dropdown.item:hover,.vi-ui.menu .link.item:hover,.vi-ui.menu a.item:hover {
    cursor: pointer;
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.95)
}

.vi-ui.link.menu .item:active,.vi-ui.menu .link.item:active,.vi-ui.menu a.item:active {
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.95)
}

.vi-ui.menu .active.item {
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95);
    font-weight: 400;
    box-shadow: none
}

.vi-ui.menu .active.item>i.icon {
    opacity: 1
}

.vi-ui.menu .active.item:hover,.vi-ui.vertical.menu .active.item:hover {
    background-color: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95)
}

.vi-ui.menu .item.disabled,.vi-ui.menu .item.disabled:hover {
    cursor: default;
    background-color: transparent!important;
    color: rgba(40,40,40,.3)
}

.vi-ui.menu:not(.vertical) .left.item,.vi-ui.menu:not(.vertical) .left.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: auto!important
}

.vi-ui.menu:not(.vertical) .right.item,.vi-ui.menu:not(.vertical) .right.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto!important
}

.vi-ui.menu .right.item::before,.vi-ui.menu .right.menu>.item::before {
    right: auto;
    left: 0
}

.vi-ui.vertical.menu {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15)
}

.vi-ui.vertical.menu .item {
    display: block;
    background: 0 0;
    border-top: none;
    border-right: none
}

.vi-ui.vertical.menu>.item:first-child {
    border-radius: .28571429rem .28571429rem 0 0
}

.vi-ui.vertical.menu>.item:last-child {
    border-radius: 0 0 .28571429rem .28571429rem
}

.vi-ui.vertical.menu .item>i.icon {
    width: 1.18em;
    float: right;
    margin: 0 0 0 .5em
}

.vi-ui.vertical.menu .item>.label+i.icon {
    float: none;
    margin: 0 .5em 0 0
}

.vi-ui.vertical.menu .item:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(34,36,38,.1);
    height: 1px
}

.vi-ui.vertical.menu .item:first-child:before {
    display: none!important
}

.vi-ui.vertical.menu .item>.menu {
    margin: .5em -1.14285714em 0
}

.vi-ui.vertical.menu .menu .item {
    background: 0 0;
    padding: .5em 1.33333333em;
    font-size: .85714286em;
    color: rgba(0,0,0,.5)
}

.vi-ui.vertical.menu .item .menu .link.item:hover,.vi-ui.vertical.menu .item .menu a.item:hover {
    color: rgba(0,0,0,.85)
}

.vi-ui.vertical.menu .menu .item:before {
    display: none
}

.vi-ui.vertical.menu .active.item {
    background: rgba(0,0,0,.05);
    border-radius: 0;
    box-shadow: none
}

.vi-ui.vertical.menu>.active.item:first-child {
    border-radius: .28571429rem .28571429rem 0 0
}

.vi-ui.vertical.menu>.active.item:last-child {
    border-radius: 0 0 .28571429rem .28571429rem
}

.vi-ui.vertical.menu>.active.item:only-child {
    border-radius: .28571429rem
}

.vi-ui.vertical.menu .active.item .menu .active.item {
    border-left: none
}

.vi-ui.vertical.menu .item .menu .active.item {
    background-color: transparent;
    font-weight: 700;
    color: rgba(0,0,0,.95)
}

.vi-ui.tabular.menu {
    border-radius: 0;
    box-shadow: none!important;
    border: none;
    background: none;
    border-bottom: 1px solid #d4d4d5
}

.vi-ui.tabular.flvi-uid.menu {
    width: calc(100% + 2px)!important
}

.vi-ui.tabular.menu .item {
    background: 0 0;
    border-bottom: none;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 2px solid transparent;
    padding: .92857143em 1.42857143em;
    color: #bdbdbd;
}

.vi-ui.tabular.menu .item:before {
    display: none
}

.vi-ui.tabular.menu .item:hover {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
}
.vi-ui.tabular.menu .item:not(.active):hover{
    cursor: pointer;
}
.vi-ui.tabular.menu .active.item {
    position:relative;
    background: $active_bgcolor;
    color: rgb(56 56 56 / 95%);
    border-top-width: 1px;
    border-color: #d4d4d5;
    font-weight: 700;
    margin-bottom: -1px;
    box-shadow: none;
    border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
}
.vi-ui.tabular.menu .active.item .btn-close{
    display: none;
}
.vi-ui.tabular.menu .item:not(.home):hover .btn-close{
    display: block;
    width:15px;
    height:15px;
    font-size: 12px;
    border-radius: 5px;
    position:absolute;
    top:2px;right:0px;
    cursor: pointer;
    &::after{
        content: '\2716';
        font-size:12px;
        font-style: normal;
    }
}

.vi-ui.tabular.menu+.attached:not(.top).segment,.vi-ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment {
    border-top: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box
}

.top.attached.segment+.vi-ui.bottom.tabular.menu {
    position: relative;
    width: calc(100% + 2px);
    left: -1px
}

.vi-ui.bottom.tabular.menu {
    background: none;
    border-radius: 0;
    box-shadow: none!important;
    border-bottom: none;
    border-top: 1px solid #d4d4d5
}

.vi-ui.bottom.tabular.menu .item {
    background: 0 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: none
}

.vi-ui.bottom.tabular.menu .active.item {
    background: #fff;
    color: rgba(0,0,0,.95);
    border-color: #d4d4d5;
    margin: -1px 0 0;
    border-radius: 0 0 .28571429rem .28571429rem!important
}

.vi-ui.vertical.tabular.menu {
    background: none;
    border-radius: 0;
    box-shadow: none!important;
    border-bottom: none;
    border-right: 1px solid #d4d4d5;
}

.vi-ui.vertical.tabular.menu .item {
    background: 0 0;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: none;
}

.vi-ui.vertical.tabular.menu .active.item {
    background: #fff;
    color: rgba(0,0,0,.95);
    border-color: #d4d4d5;
    margin: 0 -1px 0 0;
    border-radius: .28571429rem 0 0 .28571429rem!important;
}

.vi-ui.vertical.right.tabular.menu {
    background: none;
    border-radius: 0;
    box-shadow: none!important;
    border-bottom: none;
    border-right: none;
    border-left: 1px solid #d4d4d5;
}

.vi-ui.vertical.right.tabular.menu .item {
    background: 0 0;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    border-left: none
}

.vi-ui.vertical.right.tabular.menu .active.item {
    background: #fff;
    color: rgba(0,0,0,.95);
    border-color: #d4d4d5;
    margin: 0 0 0 -1px;
    border-radius: 0 .28571429rem .28571429rem 0!important;
}

.vi-ui.tabular.menu .active.dropdown.item {
    margin-bottom: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 2px solid transparent;
    border-bottom: none
}

.vi-ui.pagination.menu {
    margin: 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle
}

.vi-ui.pagination.menu .item:last-child {
    border-radius: 0 .28571429rem .28571429rem 0
}

.vi-ui.pagination.menu .item:last-child:before {
    display: none
}

.vi-ui.pagination.menu .item {
    min-width: 3em;
    text-align: center
}

.vi-ui.pagination.menu .icon.item i.icon {
    vertical-align: top
}

.vi-ui.pagination.menu .active.item {
    border-top: none;
    padding-top: .92857143em;
    background-color: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95);
    box-shadow: none
}

.vi-ui.secondary.menu {
    background: 0 0;
    margin-left: -.35714286em;
    margin-right: -.35714286em;
    border-radius: 0;
    border: none;
    box-shadow: none
}

.vi-ui.secondary.menu .item {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    box-shadow: none;
    border: none;
    padding: .71428571em .92857143em;
    margin: 0 .35714286em;
    background: 0 0;
    -webkit-transition: color .1s ease;
    transition: color .1s ease;
    border-radius: .28571429rem
}

.vi-ui.secondary.menu .item:before {
    display: none!important
}

.vi-ui.secondary.menu .header.item {
    border-radius: 0;
    border-right: none;
    background: none
}

.vi-ui.secondary.menu .item>img:not(.vi-ui) {
    margin: 0
}

.vi-ui.secondary.menu .dropdown.item:hover,.vi-ui.secondary.menu .link.item:hover,.vi-ui.secondary.menu a.item:hover {
    background: rgba(0,0,0,.05);
    color: rgb(235, 235, 235);
}

.vi-ui.secondary.menu .active.item {
    box-shadow: none;
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95);
    border-radius: .28571429rem
}

.vi-ui.secondary.menu .active.item:hover {
    box-shadow: none;
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95)
}

.vi-ui.secondary.inverted.menu .link.item,.vi-ui.secondary.inverted.menu a.item {
    color: rgba(255,255,255,.7)!important
}

.vi-ui.secondary.inverted.menu .dropdown.item:hover,.vi-ui.secondary.inverted.menu .link.item:hover,.vi-ui.secondary.inverted.menu a.item:hover {
    background: rgba(255,255,255,.08);
    color: #fff!important
}

.vi-ui.secondary.inverted.menu .active.item {
    background: rgba(255,255,255,.15);
    color: #fff!important
}

.vi-ui.secondary.item.menu {
    margin-left: 0;
    margin-right: 0
}

.vi-ui.secondary.item.menu .item:last-child {
    margin-right: 0
}

.vi-ui.secondary.attached.menu {
    box-shadow: none
}

.vi-ui.vertical.secondary.menu .item:not(.dropdown)>.menu {
    margin: 0 -.92857143em
}

.vi-ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item {
    margin: 0;
    padding: .5em 1.33333333em
}

.vi-ui.secondary.vertical.menu>.item {
    border: none;
    margin: 0 0 .35714286em;
    border-radius: .28571429rem!important
}

.vi-ui.secondary.vertical.menu>.header.item {
    border-radius: 0
}

.vi-ui.secondary.inverted.menu,.vi-ui.vertical.secondary.menu .item>.menu .item {
    background-color: transparent
}

.vi-ui.secondary.pointing.menu {
    margin-left: 0;
    margin-right: 0;
    border-bottom: 2px solid rgba(34,36,38,.15)
}

.vi-ui.secondary.pointing.menu .item {
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-radius: 0;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin: 0 0 -2px;
    padding: .85714286em 1.14285714em;
    border-bottom-width: 2px;
    -webkit-transition: color .1s ease;
    transition: color .1s ease
}

.vi-ui.secondary.pointing.menu .header.item {
    color: rgba(0,0,0,.85)!important
}

.vi-ui.secondary.pointing.menu .text.item {
    box-shadow: none!important
}

.vi-ui.secondary.pointing.menu .item:after {
    display: none
}

.vi-ui.secondary.pointing.menu .dropdown.item:hover,.vi-ui.secondary.pointing.menu .link.item:hover,.vi-ui.secondary.pointing.menu a.item:hover {
    background-color: transparent;
    color: rgba(0,0,0,.87)
}

.vi-ui.secondary.pointing.menu .dropdown.item:active,.vi-ui.secondary.pointing.menu .link.item:active,.vi-ui.secondary.pointing.menu a.item:active {
    background-color: transparent;
    border-color: rgba(34,36,38,.15)
}

.vi-ui.secondary.pointing.menu .active.item {
    background-color: transparent;
    box-shadow: none;
    border-color: #1b1c1d;
    font-weight: 700;
    color: rgba(0,0,0,.95)
}

.vi-ui.secondary.pointing.menu .active.item:hover {
    border-color: #1b1c1d;
    color: rgba(0,0,0,.95)
}

.vi-ui.secondary.pointing.menu .active.dropdown.item {
    border-color: transparent
}

.vi-ui.secondary.vertical.pointing.menu {
    border-bottom-width: 0;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: rgba(34,36,38,.15)
}

.vi-ui.secondary.vertical.pointing.menu .item {
    border-bottom: none;
    border-right-style: solid;
    border-right-color: transparent;
    border-radius: 0!important;
    margin: 0 -2px 0 0;
    border-right-width: 2px
}

.vi-ui.secondary.vertical.pointing.menu .active.item {
    border-color: #1b1c1d
}

.vi-ui.secondary.inverted.pointing.menu {
    border-width: 2px;
    border-color: rgba(34,36,38,.15)
}

.vi-ui.secondary.inverted.pointing.menu .item {
    color: rgba(255,255,255,.9)
}

.vi-ui.secondary.inverted.pointing.menu .header.item {
    color: #fff!important
}

.vi-ui.secondary.inverted.pointing.menu .item:hover {
    color: rgba(0,0,0,.95)
}

.vi-ui.secondary.inverted.pointing.menu .active.item {
    border-color: #fff;
    color: #fff
}

.vi-ui.text.menu {
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 1em -.5em
}

.vi-ui.text.menu .item {
    border-radius: 0;
    box-shadow: none;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin: 0;
    padding: .35714286em .5em;
    font-weight: 400;
    color: rgba(0,0,0,.6);
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease
}

.vi-ui.text.menu .item:before,.vi-ui.text.menu .menu .item:before {
    display: none!important
}

.vi-ui.text.menu .header.item {
    background-color: transparent;
    opacity: 1;
    color: rgba(0,0,0,.85);
    font-size: .92857143em;
    text-transform: uppercase;
    font-weight: 700
}

.vi-ui.text.item.menu .item,.vi-ui.text.menu .item>img:not(.vi-ui) {
    margin: 0
}

.vi-ui.vertical.text.menu {
    margin: 1em 0
}

.vi-ui.vertical.text.menu:first-child {
    margin-top: 0
}

.vi-ui.vertical.text.menu:last-child {
    margin-bottom: 0
}

.vi-ui.vertical.text.menu .item {
    margin: .57142857em 0
}

.vi-ui.vertical.text.menu .item>i.icon {
    float: none;
    margin: 0 .35714286em 0 0
}

.vi-ui.vertical.text.menu .header.item {
    margin: .57142857em 0 .71428571em
}

.vi-ui.vertical.text.menu .item:not(.dropdown)>.menu {
    margin: 0
}

.vi-ui.vertical.text.menu .item:not(.dropdown)>.menu>.item {
    margin: 0;
    padding: .5em 0
}

.vi-ui.text.menu .item:hover {
    opacity: 1;
    background-color: transparent
}

.vi-ui.text.menu .active.item {
    background-color: transparent;
    border: none;
    box-shadow: none;
    font-weight: 400;
    color: rgba(0,0,0,.95)
}

.vi-ui.text.menu .active.item:hover {
    background-color: transparent
}

.vi-ui.text.attached.menu,.vi-ui.text.pointing.menu .active.item:after {
    box-shadow: none
}

.vi-ui.inverted.text.menu,.vi-ui.inverted.text.menu .active.item,.vi-ui.inverted.text.menu .item,.vi-ui.inverted.text.menu .item:hover {
    background-color: transparent!important
}

.vi-ui.flvi-uid.text.menu {
    margin-left: 0;
    margin-right: 0
}

.vi-ui.vertical.icon.menu {
    display: inline-block;
    width: auto
}

.vi-ui.icon.menu .item {
    height: auto;
    text-align: center;
    color: #1b1c1d
}

.vi-ui.icon.menu .item>.icon:not(.dropdown) {
    margin: 0;
    opacity: 1
}

.vi-ui.icon.menu .icon:before {
    opacity: 1
}

.vi-ui.menu .icon.item>.icon {
    width: auto;
    margin: 0 auto
}

.vi-ui.vertical.icon.menu .item>.icon:not(.dropdown) {
    display: block;
    opacity: 1;
    margin: 0 auto;
    float: none
}

.vi-ui.inverted.icon.menu .item {
    color: #fff
}

.vi-ui.labeled.icon.menu {
    text-align: center
}

.vi-ui.labeled.icon.menu .item {
    min-width: 6em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.vi-ui.labeled.icon.menu .item>.icon:not(.dropdown) {
    height: 1em;
    display: block;
    font-size: 1.71428571em!important;
    margin: 0 auto .5rem!important
}

.vi-ui.flvi-uid.labeled.icon.menu>.item {
    min-width: 0
}

@media only screen and (max-width: 767px) {
    .vi-ui.stackable.menu {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .vi-ui.stackable.menu .item {
        width: 100%!important
    }

    .vi-ui.stackable.menu .item:before {
        position: absolute;
        content: '';
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(34,36,38,.1);
        height: 1px
    }
}

.vi-ui.menu .red.active.item,.vi-ui.red.menu .active.item {
    border-color: #db2828!important;
    color: #db2828!important
}

.vi-ui.menu .orange.active.item,.vi-ui.orange.menu .active.item {
    border-color: #f2711c!important;
    color: #f2711c!important
}

.vi-ui.menu .yellow.active.item,.vi-ui.yellow.menu .active.item {
    border-color: #fbbd08!important;
    color: #fbbd08!important
}

.vi-ui.menu .olive.active.item,.vi-ui.olive.menu .active.item {
    border-color: #b5cc18!important;
    color: #b5cc18!important
}

.vi-ui.green.menu .active.item,.vi-ui.menu .green.active.item {
    border-color: #21ba45!important;
    color: #21ba45!important
}

.vi-ui.menu .teal.active.item,.vi-ui.teal.menu .active.item {
    border-color: #00b5ad!important;
    color: #00b5ad!important
}

.vi-ui.blue.menu .active.item,.vi-ui.menu .blue.active.item {
    border-color: #2185d0!important;
    color: #2185d0!important
}

.vi-ui.menu .violet.active.item,.vi-ui.violet.menu .active.item {
    border-color: #6435c9!important;
    color: #6435c9!important
}

.vi-ui.menu .purple.active.item,.vi-ui.purple.menu .active.item {
    border-color: #a333c8!important;
    color: #a333c8!important
}

.vi-ui.menu .pink.active.item,.vi-ui.pink.menu .active.item {
    border-color: #e03997!important;
    color: #e03997!important
}

.vi-ui.brown.menu .active.item,.vi-ui.menu .brown.active.item {
    border-color: #a5673f!important;
    color: #a5673f!important
}

.vi-ui.grey.menu .active.item,.vi-ui.menu .grey.active.item {
    border-color: #767676!important;
    color: #767676!important
}

.vi-ui.inverted.menu {
    border: 0 solid transparent;
    background: #1b1c1d;
    box-shadow: none
}

.vi-ui.inverted.menu .item,.vi-ui.inverted.menu .item>a:not(.vi-ui) {
    background: 0 0;
    color: rgba(255,255,255,.9)
}

.vi-ui.inverted.menu .item.menu {
    background: 0 0
}

.vi-ui.inverted.menu .item:before,.vi-ui.vertical.inverted.menu .item:before {
    background: rgba(255,255,255,.08)
}

.vi-ui.vertical.inverted.menu .menu .item,.vi-ui.vertical.inverted.menu .menu .item a:not(.vi-ui) {
    color: rgba(255,255,255,.5)
}

.vi-ui.inverted.menu .header.item {
    margin: 0;
    background: 0 0;
    box-shadow: none
}

.vi-ui.inverted.menu .item.disabled,.vi-ui.inverted.menu .item.disabled:hover {
    color: rgba(225,225,225,.3)
}

.vi-ui.inverted.menu .dropdown.item:hover,.vi-ui.inverted.menu .link.item:hover,.vi-ui.inverted.menu a.item:hover,.vi-ui.link.inverted.menu .item:hover {
    background: rgba(255,255,255,.08);
    color: #fff
}

.vi-ui.vertical.inverted.menu .item .menu .link.item:hover,.vi-ui.vertical.inverted.menu .item .menu a.item:hover {
    background: 0 0;
    color: #fff
}

.vi-ui.inverted.menu .link.item:active,.vi-ui.inverted.menu a.item:active {
    background: rgba(255,255,255,.08);
    color: #fff
}

.vi-ui.inverted.menu .active.item {
    background: rgba(255,255,255,.15);
    color: #fff!important
}

.vi-ui.inverted.vertical.menu .item .menu .active.item {
    background: 0 0;
    color: #fff
}

.vi-ui.inverted.pointing.menu .active.item:after {
    background: #3d3e3f!important;
    margin: 0!important;
    box-shadow: none!important;
    border: none!important
}

.vi-ui.inverted.menu .active.item:hover {
    background: rgba(255,255,255,.15);
    color: #fff!important
}

.vi-ui.inverted.pointing.menu .active.item:hover:after {
    background: #3d3e3f!important
}

.vi-ui.floated.menu {
    float: left;
    margin: 0 .5rem 0 0
}

.vi-ui.floated.menu .item:last-child:before {
    display: none
}

.vi-ui.right.floated.menu {
    float: right;
    margin: 0 0 0 .5rem
}

.vi-ui.inverted.menu .red.active.item,.vi-ui.inverted.red.menu {
    background-color: #db2828
}

.vi-ui.inverted.red.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.red.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .orange.active.item,.vi-ui.inverted.orange.menu {
    background-color: #f2711c
}

.vi-ui.inverted.orange.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.orange.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .yellow.active.item,.vi-ui.inverted.yellow.menu {
    background-color: #fbbd08
}

.vi-ui.inverted.yellow.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.yellow.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .olive.active.item,.vi-ui.inverted.olive.menu {
    background-color: #b5cc18
}

.vi-ui.inverted.olive.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.olive.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.green.menu,.vi-ui.inverted.menu .green.active.item {
    background-color: #21ba45
}

.vi-ui.inverted.green.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.green.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .teal.active.item,.vi-ui.inverted.teal.menu {
    background-color: #00b5ad
}

.vi-ui.inverted.teal.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.teal.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.blue.menu,.vi-ui.inverted.menu .blue.active.item {
    background-color: #2185d0
}

.vi-ui.inverted.blue.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.blue.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .violet.active.item,.vi-ui.inverted.violet.menu {
    background-color: #6435c9
}

.vi-ui.inverted.violet.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.violet.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .purple.active.item,.vi-ui.inverted.purple.menu {
    background-color: #a333c8
}

.vi-ui.inverted.purple.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.purple.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.menu .pink.active.item,.vi-ui.inverted.pink.menu {
    background-color: #e03997
}

.vi-ui.inverted.pink.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.pink.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.brown.menu,.vi-ui.inverted.menu .brown.active.item {
    background-color: #a5673f
}

.vi-ui.inverted.brown.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.brown.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.inverted.grey.menu,.vi-ui.inverted.menu .grey.active.item {
    background-color: #767676
}

.vi-ui.inverted.grey.menu .item:before {
    background-color: rgba(34,36,38,.1)
}

.vi-ui.inverted.grey.menu .active.item {
    background-color: rgba(0,0,0,.1)!important
}

.vi-ui.fitted.menu .item,.vi-ui.fitted.menu .item .menu .item,.vi-ui.menu .fitted.item {
    padding: 0
}

.vi-ui.horizontally.fitted.menu .item,.vi-ui.horizontally.fitted.menu .item .menu .item,.vi-ui.menu .horizontally.fitted.item {
    padding-top: .92857143em;
    padding-bottom: .92857143em
}

.vi-ui.menu .vertically.fitted.item,.vi-ui.vertically.fitted.menu .item,.vi-ui.vertically.fitted.menu .item .menu .item {
    padding-left: 1.14285714em;
    padding-right: 1.14285714em
}

.vi-ui.borderless.menu .item .menu .item:before,.vi-ui.borderless.menu .item:before,.vi-ui.menu .borderless.item:before {
    background: 0 0!important
}

.vi-ui.compact.menu {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    vertical-align: middle
}

.vi-ui.compact.vertical.menu {
    display: inline-block;
    width: auto!important
}

.vi-ui.compact.menu .item:last-child {
    border-radius: 0 .28571429rem .28571429rem 0
}

.vi-ui.compact.menu .item:last-child:before {
    display: none
}

.vi-ui.compact.vertical.menu .item:last-child::before {
    display: block
}

.vi-ui.menu.flvi-uid,.vi-ui.vertical.menu.flvi-uid {
    width: 100%!important
}

.vi-ui.item.menu,.vi-ui.item.menu .item {
    width: 100%;
    padding-left: 0!important;
    padding-right: 0!important;
    margin-left: 0!important;
    margin-right: 0!important;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.vi-ui.item.menu .item:last-child:before {
    display: none
}

.vi-ui.menu.two.item .item {
    width: 50%
}

.vi-ui.menu.three.item .item {
    width: 33.333%
}

.vi-ui.menu.four.item .item {
    width: 25%
}

.vi-ui.menu.five.item .item {
    width: 20%
}

.vi-ui.menu.six.item .item {
    width: 16.666%
}

.vi-ui.menu.seven.item .item {
    width: 14.285%
}

.vi-ui.menu.eight.item .item {
    width: 12.5%
}

.vi-ui.menu.nine.item .item {
    width: 11.11%
}

.vi-ui.menu.ten.item .item {
    width: 10%
}

.vi-ui.menu.eleven.item .item {
    width: 9.09%
}

.vi-ui.menu.twelve.item .item {
    width: 8.333%
}

.vi-ui.menu.fixed {
    position: fixed;
    z-index: 101;
    margin: 0;
    width: 100%
}

.vi-ui.menu.fixed,.vi-ui.menu.fixed .item:first-child,.vi-ui.menu.fixed .item:last-child {
    border-radius: 0!important
}

.vi-ui.fixed.menu,.vi-ui[class*="top fixed"].menu {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto
}

.vi-ui[class*="top fixed"].menu {
    border-top: none;
    border-left: none;
    border-right: none
}

.vi-ui[class*="right fixed"].menu {
    border-top: none;
    border-bottom: none;
    border-right: none;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: auto;
    height: 100%
}

.vi-ui[class*="bottom fixed"].menu {
    border-bottom: none;
    border-left: none;
    border-right: none;
    bottom: 0;
    left: 0;
    top: auto;
    right: auto
}

.vi-ui[class*="left fixed"].menu {
    border-top: none;
    border-bottom: none;
    border-left: none;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%
}

.vi-ui.fixed.menu+.vi-ui.grid {
    padding-top: 2.75rem
}

.vi-ui.pointing.menu .item:after {
    visibility: hidden;
    position: absolute;
    content: '';
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    background: 0 0;
    margin: .5px 0 0;
    width: .57142857em;
    height: .57142857em;
    border: none;
    border-bottom: 1px solid #d4d4d5;
    border-right: 1px solid #d4d4d5;
    z-index: 2;
    -webkit-transition: background .1s ease;
    transition: background .1s ease
}

.vi-ui.vertical.pointing.menu .item:after {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(50%) translateY(-50%) rotate(45deg);
    transform: translateX(50%) translateY(-50%) rotate(45deg);
    margin: 0 -.5px 0 0;
    border: none;
    border-top: 1px solid #d4d4d5;
    border-right: 1px solid #d4d4d5
}

.vi-ui.pointing.menu .active.item:after {
    visibility: visible
}

.vi-ui.pointing.menu .active.dropdown.item:after {
    visibility: hidden
}

.vi-ui.pointing.menu .active.item .menu .active.item:after,.vi-ui.pointing.menu .dropdown.active.item:after {
    display: none
}

.vi-ui.pointing.menu .active.item:after,.vi-ui.pointing.menu .active.item:hover:after,.vi-ui.vertical.pointing.menu .active.item:after,.vi-ui.vertical.pointing.menu .active.item:hover:after {
    background-color: #f2f2f2
}

.vi-ui.vertical.pointing.menu .menu .active.item:after {
    background-color: #fff
}

.vi-ui.attached.menu {
    top: 0;
    bottom: 0;
    border-radius: 0;
    margin: 0 -1px;
    width: calc(100% + 2px);
    max-width: calc(100% + 2px);
    box-shadow: none
}

.vi-ui.attached+.vi-ui.attached.menu:not(.top) {
    border-top: none
}

.vi-ui[class*="top attached"].menu {
    bottom: 0;
    margin-bottom: 0;
    top: 0;
    margin-top: 1rem;
    border-radius: .28571429rem .28571429rem 0 0
}

.vi-ui.menu[class*="top attached"]:first-child {
    margin-top: 0
}

.vi-ui[class*="bottom attached"].menu {
    bottom: 0;
    margin-top: 0;
    top: 0;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),none;
    border-radius: 0 0 .28571429rem .28571429rem
}

.vi-ui[class*="bottom attached"].menu:last-child {
    margin-bottom: 0
}

.vi-ui.top.attached.menu>.item:first-child {
    border-radius: .28571429rem 0 0
}

.vi-ui.bottom.attached.menu>.item:first-child {
    border-radius: 0 0 0 .28571429rem
}

.vi-ui.attached.menu:not(.tabular) {
    border: 1px solid #d4d4d5
}

.vi-ui.attached.inverted.menu {
    border: none
}

.vi-ui.attached.tabular.menu {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    background: #2e2e2e;
    /* color: #fff; */
    padding-top: 5px;
}

.vi-ui.small.menu {
    font-size: .92857143rem
}

.vi-ui.small.vertical.menu {
    width: 13rem
}

.vi-ui.menu {
    font-size: 1rem
}

.vi-ui.vertical.menu {
    width: 15rem
}

.vi-ui.large.menu {
    font-size: 1.14285714rem
}

.vi-ui.large.vertical.menu {
    width: 18rem
}

.vi-ui.huge.menu {
    font-size: 1.42857143rem
}

.vi-ui.huge.vertical.menu {
    width: 20rem
}

</style>
